  ion-header {
      background: transparent !important;
      left: 0;
      top: 0;
      position: absolute;
      z-index: 10;
      display: block;
      width: 100%;
      min-height: 64px;
      .header-md:after {
          height: 0;
      }
      ion-toolbar {
          height: 100%;
          position: absolute;
          width: 100%;
          left: 0;
          --background: transparent !important;
          --border-width: 0;
          .button-left {
              padding: 0;
              width: 72px;
              height: 44px;
              position: absolute;
              padding-left: 10px;
              background: transparent;
              text-align: left;
              outline: none;
              z-index: 999;
              top: 0;
              span {
                  width: 30px;
                  height: 30px;
                  img {
                      width: 24px;
                  }
              }
          }
          .button-search {
              height: 44px;
              color: #fff;
              background: transparent;
              width: 72px;
              padding: 0;
              padding-right: 11px;
              text-align: right;
              outline: none;
              position: absolute;
              top: 0;
              right: 0;
              span {
                  width: 30px;
                  height: 30px;
                  padding: 4px;
                  img {
                      height: 24px;
                  }
              }
          }
          //   &.active {
          //       background: #1fb5ff !important;
          //       transition: 2s;
          //   }
      }
      &.active {
          background: #1fb5ff !important;
          transition: 1s;
      }
  }
  
  ion-content {
      //   .scroll-content {
      margin-top: 0 !important;
      top: 0;
      //   }
  }
  
  .bg-top {
      width: 105%;
      height: 290px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      filter: blur(7px);
      top: -10px;
      left: -10px;
      position: absolute;
      // background: url(http://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=3893146502,314297687&os=529160546,312385151&simid=3249461789,158252003&pn=8&rn=1&di=162470&ln=1623&fr=&fmq=1559708730397_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fpic31.nipic.com%2F20130801%2F11604791_100539834000_2.jpg&rpstart=0&rpnum=0&adpicid=0&force=undefined);
  }
  
  .top {
      width: 100%;
      position: relative;
      -webkit-transition: all 1s;
      transition: all 1s;
      max-height: 270px;
      min-height: 270px;
      padding-top: 44px;
      background: rgba(0, 0, 0, 0.2);
      padding-top: 64px;
      .bg-shadow {
          &:nth-of-type(1) {
              position: absolute;
              width: 35px;
              height: 35px;
              left: -5px;
              filter: blur(15px);
              background-size: cover;
          }
          &:nth-of-type(2) {
              position: absolute;
              width: 35px;
              height: 35px;
              right: -5px;
              filter: blur(15px);
              background-size: cover;
          }
      }
      .project-title {
          font-size: 19px;
          height: 44px;
          line-height: 44px;
          color: #fff;
          display: flex;
          text-align: center;
          position: fixed;
          width: 100%;
          top: 20px;
          z-index: 1;
          .title-name {
              flex: 1;
          }
          .title-left {
              width: 44px;
              height: 44px;
              text-align: left;
              padding-left: 15px;
              img {
                  width: 24px;
                  vertical-align: middle;
              }
          }
          .title-right {
              width: 44px;
              height: 44px;
              margin-right: 2px;
              img {
                  width: 24px;
                  vertical-align: middle;
              }
          }
      }
      .circle {
          width: 125px;
          height: 125px;
          border-radius: 50%;
          margin-left: 50%;
          transform: translateX(-50%);
          position: relative;
          border: 4px solid rgba(255, 255, 255, .1);
          .head-portrait {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              background-size: cover;
              background-repeat: no-repeat;
              background-position: center;
          }
      }
      .midDiv {
          display: flex;
          color: #fff;
          overflow-x: auto;
          margin: 10px 15px 0 15px;
          // background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
          .mid-content {
              min-width: 30%;
              text-align: center;
              .mid-title {
                  height: 20px;
                  line-height: 20px;
                  justify-content: center;
                  display: flex;
                  .inline-data {
                      color: #fff;
                      font-size: 20px;
                      text-shadow: 1px 1px 1px rgba(0, 0, 0, .53);
                  }
                  .alarm-data {
                      color: #FF1919;
                      margin-right: 1px;
                  }
                  .total-data {
                      font-size: 17px;
                      text-shadow: 1px 1px 1px rgba(0, 0, 0, .53);
                      &::before {
                          content: '|';
                          padding: 0 3px;
                      }
                  }
              }
              .mid-name {
                  color: #fff;
                  opacity: 0.8;
                  font-size: 11px;
                  text-shadow: 1px 1px 1px rgba(0, 0, 0, .53);
                  text-align: center;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  margin: -2px auto;
                  overflow: hidden;
              }
              i {
                  font-size: 11px;
                  font-style: normal;
              }
          }
          // .each-data {
          //     text-align: center;
          //     position: relative;
          //     flex: 0 0 25%;
          //     min-height: 40px;
          //     max-height: 40px;
          //     img {
          //         height: 13px;
          //     }
          //     .inline-data {
          //         color: #fff;
          //         font-size: 20px;
          //         text-shadow: 1px 1px 1px rgba(0, 0, 0, .53);
          //     }
          //     .alarm-data {
          //         color: #FF1919;
          //         margin-right: 1px;
          //     }
          //     .divide-line {
          //         width: 1px;
          //         height: 15px;
          //         border: 0;
          //         background: #e9f0f4;
          //         display: inline-block;
          //         position: absolute;
          //         top: -4px;
          //         opacity: 0.3;
          //     }
          //     .total-data {
          //         color: #fff;
          //         font-size: 17px;
          //         text-shadow: 1px 1px 1px rgba(0, 0, 0, .53);
          //         padding-left: 4px;
          //         font-weight: 200;
          //     }
          //     .unit {
          //         color: #fff;
          //         font-size: 9px;
          //     }
          //     .data-value {
          //         margin: 0 auto;
          //     }
          //     .data-name {
          //         color: #fff;
          //         opacity: 0.8;
          //         font-size: 11px;
          //         text-shadow: 1px 1px 1px rgba(0, 0, 0, .53);
          //         margin-top: -2px;
          //         text-align: center;
          //         text-overflow: ellipsis;
          //         white-space: nowrap;
          //         margin: 0 auto;
          //         overflow: hidden;
          //     }
          // }
      }
      .inform {
          position: absolute;
          bottom: 5px;
          color: #fff;
          height: 27px;
          line-height: 27px;
          overflow: hidden;
          padding: 0 15px 0 15px;
          width: 100%;
          display: flex;
          align-items: center;
          img {
              display: inline-block;
              width: 14px;
              height: 14px;
              vertical-align: middle;
              margin: -2px 5px 0 0;
          }
      }
  }
  
  .bottom-part {
      position: relative;
      min-height: 50px;
      background: #fff;
      .area {
          .area-title {
              font-size: 17px;
              color: #222;
              margin: 0;
              padding: 15px 0 0 15px;
              font-family: 'sf_bold';
              font-weight: 550;
          }
          .area-content {
              width: 100%;
              padding: 0;
              background: #fff;
              position: relative;
              display: flex;
              flex-wrap: wrap;
              .each-module {
                  flex: 0 0 25%;
                  max-width: 25%;
                  background: #fff;
                  // height: 72px;
                  text-align: center;
                  img {
                      width: 30px;
                      height: 30px;
                      margin-top: 11px;
                  }
                  p {
                      color: #222;
                      margin-top: 0px;
                      font-size: 13px;
                      padding: 0px 7px;
                      line-height: 17px;
                  }
              }
          }
      }
  }
  
  .header-md:after {
      height: 0;
  }